<template>
  <div class="layouts-menu-horizontal">
    <div class="menu-horizontal-logo" v-if="config.layout.menuShowTopBar">
      <Logo />
    </div>
    <div class="top-menu">
      <img class="top-menu-drop" src="@/images/sidebar_a.png" @mouseenter="setShowTopMenu" @mouseleave="setHideTopMenu" />
      <div class="shuxian"></div>
      <img class="home-page-icon" src="@/images/sidebar_b.png" />
      <span class="home-page-text">概览</span>
    </div>

    <div class="top-menu-box" v-if="showTopMenu" @mouseenter="setShowTopMenu" @mouseleave="setHideTopMenu">
      <div class="top-menu-box--item" v-for="item in menuList" :key="item.label">
        <div class="top-menu-box--icon">
          <div></div>
          <img :src="item.src" />
        </div>
        <div class="top-menu-box--label">{{ item.label }}</div>
      </div>
    </div>

    <div class="collect-menu-list">
      <div class="collect-menu-list--item" v-for="item in collectMenuList" :key="item.label">
        <img class="collect-menu-list--icon" :src="item.src" />
        <span class="collect-menu-list--label">{{ item.label }}</span>
      </div>
    </div>

    <!--    <el-scrollbar ref="horizontalMenusRef" class="horizontal-menus-scrollbar">-->
    <!--      <el-menu class="menu-horizontal" mode="horizontal" :default-active="state.defaultActive" :key="state.menuKey">-->
    <!--        &lt;!&ndash; 横向菜单直接使用 <MenuTree :menus="menus" /> 会报警告 &ndash;&gt;-->
    <!--        <template v-for="menu in menus">-->
    <!--          <template v-if="menu.children && menu.children.length > 0">-->
    <!--            <el-sub-menu :index="menu.path" :key="menu.path">-->
    <!--              <template #title>-->
    <!--                <Icon-->
    <!--                    :color="config.getColorVal('menuColor')"-->
    <!--                    :name="menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon"-->
    <!--                />-->
    <!--                <span>{{ menu.meta?.title ? menu.meta?.title : 'noTitle' }}</span>-->
    <!--              </template>-->
    <!--              <menu-tree :menus="menu.children"></menu-tree>-->
    <!--            </el-sub-menu>-->
    <!--          </template>-->
    <!--          <template v-else>-->
    <!--            <el-menu-item v-blur :index="menu.path" :key="menu.path" @click="onClickMenu(menu)">-->
    <!--              <Icon-->
    <!--                  :color="config.getColorVal('menuColor')"-->
    <!--                  :name="menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon"-->
    <!--              />-->
    <!--              <span>{{ menu.meta?.title ? menu.meta?.title : 'noTitle' }}</span>-->
    <!--            </el-menu-item>-->
    <!--          </template>-->
    <!--        </template>-->
    <!--      </el-menu>-->
    <!--    </el-scrollbar>-->
    <NavMenus />
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import Logo from "../logo.vue";
import MenuTree from "./menuTree.vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useConfig } from "@/stores/config";
import { useNavTabs } from "@/stores/navTabs";
import { ElScrollbar } from "element-plus";
import NavMenus from "../navMenus.vue";
import { onClickMenu } from "@/utils/router";
import { uuid } from "@/utils/random";

const horizontalMenusRef = ref();

const config = useConfig();
const navTabs = useNavTabs();
// const route = useRoute();

// const state = reactive({
//   menuKey: uuid(),
//   defaultActive: "",
// });

// const menus = computed(() => {
//   state.menuKey = uuid(); // eslint-disable-line
//   return navTabs.state.tabsViewRoutes;
// });

// 激活当前路由的菜单
// const currentRouteActive = (currentRoute) => {
//   state.defaultActive = currentRoute.path;
// };

// // 滚动条滚动到激活菜单所在位置
// const verticalMenusScroll = () => {
//   nextTick(() => {
//     let activeMenu = document.querySelector(
//       ".el-menu.menu-horizontal li.is-active"
//     );
//     if (!activeMenu) return false;
//     horizontalMenusRef.value?.setScrollTop(activeMenu.offsetTop);
//   });
// };

// onMounted(() => {
//   currentRouteActive(route);
//   verticalMenusScroll();
// });

// onBeforeRouteUpdate((to) => {
//   currentRouteActive(to);
// });

// 悬浮菜单
const collectMenuList = [
  {
    src: require('@/images/svg/sidebar_c.svg'),
    label: '账户中心'
  },
  {
    src: require('@/images/svg/sidebar_d.svg'),
    label: '资金中心'
  },
  {
    src: require('@/images/svg/sidebar_e.svg'),
    label: '预算中心'
  },
  {
    src: require('@/images/svg/sidebar_f.svg'),
    label: '对账中心'
  },
  {
    src: require('@/images/svg/sidebar_g.svg'),
    label: '投资中心'
  },
]
const menuList = [
  {
    src: require('@/images/svg/home_top_a.svg'),
    label: '账户中心'
  },
  {
    src: require('@/images/svg/home_top_b.svg'),
    label: '结算中心'
  },
  {
    src: require('@/images/svg/home_top_c.svg'),
    label: '费控中心'
  },
  {
    src: require('@/images/svg/home_top_d.svg'),
    label: '对账中心'
  },
  {
    src: require('@/images/svg/home_top_e.svg'),
    label: '资金中心'
  },
  {
    src: require('@/images/svg/home_top_f.svg'),
    label: '预算中心'
  },
  {
    src: require('@/images/svg/home_top_g.svg'),
    label: '投资中心'
  },
  {
    src: require('@/images/svg/home_top_h.svg'),
    label: '融资中心'
  },
  {
    src: require('@/images/svg/home_top_i.svg'),
    label: '票据中心'
  },
  {
    src: require('@/images/svg/home_top_j.svg'),
    label: '国际结算中心'
  },
  {
    src: require('@/images/svg/home_top_k.svg'),
    label: '外汇中心'
  },
  {
    src: require('@/images/svg/home_top_l.svg'),
    label: '稽核中心'
  },
  {
    src: require('@/images/svg/home_top_m.svg'),
    label: '报表中心'
  },
  {
    src: require('@/images/svg/home_top_n.svg'),
    label: '决策中心'
  },
  {
    src: require('@/images/svg/home_top_o.svg'),
    label: '预警中心'
  },
]
let timer = null
const showTopMenu = ref(false)
const setShowTopMenu = () => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
  showTopMenu.value = true
}
const setHideTopMenu = () => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
  timer = setTimeout(() => {
    showTopMenu.value = false
  }, 300)
}
</script>

<style scoped>
.top-menu-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  position: fixed;
  top: 44px;
  left: 120px;
  width: 1200px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0px 9px 20px 0px rgba(1, 55, 170, 0.08);
  border-radius: 4px;
  z-index: 2001;
  border: 1px solid;
  border-image: linear-gradient(145deg,
      rgba(255, 255, 255, 1),
      rgba(0, 78, 245, 0.4)) 1 1;
  backdrop-filter: blur(3px);
  padding: 40px 36px;
}

.top-menu-box--item {
  cursor: pointer;
  display: flex;
}

.top-menu-box .top-menu-box--icon {
  position: relative;
}

.top-menu-box .top-menu-box--icon>img {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

.top-menu-box .top-menu-box--icon>div {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #e4edff 0%, #1862ff 100%);
  border-radius: 4px;
  opacity: 0.1;
}

.top-menu-box--label {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 64px;
  padding: 0 12px;
}

.collect-menu-list {
  display: flex;
}

.collect-menu-list--item {
  cursor: pointer;
  display: flex;
  color: #999999;
  margin-right: 24px;
}

.collect-menu-list--item:hover {
  color: var(--el-color-primary);
}

.collect-menu-list--icon {
  margin-right: 4px;
}

.top-menu {
  display: flex;
  vertical-align: middle;
  margin-right: 24px;
}

.top-menu-drop {
  cursor: pointer;
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.shuxian {
  width: 1px;
  height: 20px;
  padding: 2px 0;
  background: #999999;
  margin-right: 10px;
  opacity: 0.6;
}

.home-page-icon {
  cursor: pointer;
  margin-right: 4px;
  width: 20px;
  height: 20px;
}

.home-page-text {
  cursor: pointer;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #004df3;
  line-height: 16px;
  padding-top: 1px;
}

.layouts-menu-horizontal {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 56px;
  background-color: var(--ba-bg-color-overlay);
  border-bottom: 1px solid var(--el-color-info-light-8);
}

.layouts-menu-horizontal .el-menu--horizontal>.el-menu-item {
  border-bottom: none;
}

.menu-horizontal-logo {
  width: 232px;
}

.menu-horizontal-logo:hover {
  background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
}

.horizontal-menus-scrollbar {
  flex: 1;
}

.menu-horizontal {
  border: none;
  --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
  --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
  --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
}

.el-sub-menu .icon,
.el-menu-item .icon {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.is-active .icon {
  color: var(--el-menu-active-color) !important;
}

.el-menu-item.is-active {
  background-color: v-bind('config.getColorVal("menuActiveBackground")');
}</style>
